Skip to main content

πŸ’Ύ Database Request

The Database Request feature enables you to query data from your AppStruct Backend and map that data to components on your screen. This is particularly useful for displaying dynamic content from tables directly in your app.

Before You Begin​

For a smooth experience, make sure you have already set up your AppStruct Backend and created your necessary tables. For more details on creating a backend, please refer to the AppStruct Backend documentation.

How to Use​

  1. Drag a card component (or any container element) onto your canvas where you want to display the data.
  2. Select the card component you added and click Add Action in the left bar.
  3. A special node for the Database Request action will appear. Click on it node to open its settings panel.
  4. Map the Request Settings:
    • Action Trigger:
      • Choose when the request should run. For a simple example, select on page load.
    • Backend Platform:
      • Choose AppStruct Backend as your data source.
    • Table Selection:
      • Select the table from which you want to fetch data (e.g., Cars).
    • Method:
      • Choose Select to retrieve data from the table. You can also have: Insert, Update, Delete.

Adding Filters​

If you need to narrow down the data returned by your query:

  1. Click Add Filters.
  2. Set the filter criteria by choosing the column, the comparison operator (e.g., =), and the value. You can add multiple filters if needed.

Connecting Data​

  1. Click Connect to component in the Database Request settings.
  2. Choose the column from your table that you want to display (e.g., the Name column from the Cars table).
  3. Map this data to the corresponding element within your card component (e.g., the Π‘ard Title element).
  4. In the component settings, select the type (in our example, it’s Text) to ensure proper data display.

Preview​

  1. Once you have mapped all columns from your table to the corresponding UI components (e.g., title, subtitle, image) in your card, it’s time to see the results.
  2. At the top-right corner of the editor, click Preview to open a live view of your app.
  3. Ensure that the data from your selected table columns (e.g., β€œFerrari” for Name, β€œ100,000$” for Price, etc.) is correctly displayed in each mapped component.
  4. If your app has interactive elements (e.g., filters, buttons), test them to confirm they function correctly with the database request.

Best Practices​

  1. Plan Your Data Structure: Organize your backend tables and columns carefully before integrating with your UI. A well-planned structure simplifies mapping and ensures scalability.
  2. Use Filters Wisely: Apply filters to limit the data retrieved to only what’s necessary. This reduces load times and improves performance, especially with large datasets.
  3. Consistent Naming Conventions: Use clear, consistent names for your tables and columns. This makes mapping easier and reduces errors when connecting data to UI components.
  4. Test Thoroughly: Regularly use the preview mode to verify that data is loaded correctly and UI components display the expected values. Test various scenarios, including edge cases where no data is returned.
  5. Optimize Data Requests: When possible, minimize the amount of data fetched by selecting only the required columns. This ensures faster load times and a smoother user experience.
  6. Iterative Development: Start with simple requests and mappings. Once the basic functionality works, gradually add filters and additional data fields to refine your app’s functionality.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].